<template>
  <div style="width:316px">
    <div v-for="item in 10" :key="item" class="list-wrapper ">
      <div class="detail-wrap">
        <a class="img-wrapper imgSize" href="#" target="_blank">
          <div class="rank-container diamond index" :class="{'c-text-danger': item==1,'c-text-warning': item > 1 && item < 4, 'c-text-safe': item > 3}">
            <span>{{item}}</span>
          </div>
          <img src="https://t15.baidu.com/it/u=4283546046,1071064196&amp;fm=55&amp;app=54&amp;fmt=auto?w=1140&amp;h=640">
          <div class="border"></div>
        </a>
        <div class="right margin-left">
          <div class="title c-color-text">
            <a href="#" target="_blank" class="multi-line-title c-line-clamp1">
              十个坚持总结百年奋斗历史经验<!--33-->
              <span class="c-text c-text-hot behind-tag c-text-new">热</span><!--34-->
            </a>
            <span class="c-color-gray2 trendce no-padding-right">494万<!--36--></span>
          </div><!--37-->
        </div>
      </div>
      <div class="normal" @mouseover="addClassByIndex($event)">
        <div class="normal-col">
          <div class="rank-container c-color-red">
            <span>{{item}}</span>
          </div>
          <a target="_blank" title="十个坚持总结百年奋斗历史经验" href="#" class="c-font-medium c-line-clamp1">
            十个坚持总结百年奋斗历史经验<!--39-->
          </a>
          <span class="c-text c-text-hot c-text-new">热</span><!--40-->
        </div>
        <div class="hot-score normal-col c-color-gray2" style="float: right;">
          <span class="c-color-gray2 trendce no-padding-right">494万<!--42--></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextView',

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    addClassByIndex(e) {
      this.$el.querySelector('.active')?.classList.remove('active')
      e.relatedTarget?.classList.add('active')
    }
  },
};
</script>

<style lang="less" scoped>
.list-wrapper {
  padding: 5px 0;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
}
.list-wrapper.active .detail-wrap {
  opacity: 1;
  height: 80px;
}
.list-wrapper.active .normal {
  height: 0;
  opacity: 0;
}
.list-wrapper.active .normal .normal-col,
.list-wrapper.active .normal .hot-score {
  display: none;
}
.list-wrapper .detail-wrap {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: all 0.3s;
}
.list-wrapper .normal {
  transition: all 0.3s;
}

.detail-wrap {
  position: relative;
  overflow: hidden;
  height: 107px;
  border-radius: 12px;
}
.detail-wrap:hover {
  background: #F0F3FD;
}
.detail-wrap:hover .right .title a {
  color: #315EFB;
}
.img-wrapper {
  position: absolute;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background-color: #FFF;
}
.img-wrapper .border {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}
.img-wrapper .index {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  width: 22px;
  border-radius: 8px 1px 8px 1px;
  font-weight: normal;
}
.img-wrapper img {
  width: 100%;
  height: 100%;
}
.imgSize {
  height: 80px;
  width: 128px;
}
.rank-container {
  display: inline-block;
}
.diamond {
  font-weight: bold;
  width: 20px;
  height: 20px;
  border-radius: 12px 1px 12px 1px;
  text-align: center;
  color: #FFFFFF;
  background: #FAA90E;
  font-size: 12px;
}
.right {
  margin-left: 92px;
}
.right.margin-left {
  margin-left: 140px;
}
.right .title {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  font-size: 14px;
  line-height: 16px;
}
.right .title .multi-line-title {
  display: inline-block;
  max-width: 160px;
  max-height: 72px;
  line-height: 24px;
  margin-top: -4px;
  white-space: pre-line;
  word-break: break-all;
}
.right .title .behind-tag {
  margin-left: 4px;
  margin-top: -3px;
}
.c-text{display:inline-block;padding:2px;text-align:center;vertical-align:text-bottom;font-size:12px;line-height:100%;font-style:normal;font-weight:400;color:#fff;overflow:hidden}
a.c-text,a.c-text:hover,a.c-text:active,a.c-text:visited{color:#fff;text-decoration:none}
.c-text-new{background-color:#f13f40}
.c-text-warning{background-color:#ff830f}
.c-text-danger{background-color:#f13f40}
.c-text-safe{background-color:#52c277}
.normal-col {
  display: inline-block;
  line-height: 20px;
  margin-left: 2px;
}
</style>